<!--  -->
<template>
  <div>
    <div class="his-hot">
      <div class="hd">
        <h4>历史记录</h4>
        <van-icon name="delete-o"
                  @click="clearHistory" />
      </div>
      <div class="bd">
        <van-tag plain
                 type="primary"
                 v-for="(item,index) in historyKeywordList"
                 :key="index"
                 @click="tagClick(item)">{{item}}</van-tag>
      </div>
    </div>

    <div class="his-hot">
      <div class="hd">
        <h4>热门搜索</h4>
        <van-icon />
      </div>
      <div class="bd">
        <!-- 
          绑定类：当class中is_hot为red时，颜色为红
         -->
        <van-tag plain
                 type="primary"
                 v-for="(item,index) in hotKeywordList"
                 :key="index"
                 :class="item.is_hot ? 'red':'' "
                 @click="tagClick(item.keyword)">{{item.keyword}}</van-tag>
      </div>
    </div>
  </div>
</template>

<script>
import { clearHistory } from "@/request/api.js"
export default {
  data () {
    return {

    }
  },
  props: {
    historyKeywordList: {
      type: Array,
      default () {
        return []
      }
    },
    hotKeywordList: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  methods: {
    tagClick (item) {
      //console.log(item);
      this.$emit('tagClick', item);
    },
    clearHistory () {
      console.log('clearHistory');
      clearHistory().then((res) => {
        if (res.errno == 0) {
          const toast = this.$toast.loading({
            duration: 0, // 持续展示 toast
            forbidClick: true,
            message: '倒计时 3 秒',
          });

          let second = 3;
          const timer = setInterval(() => {
            second--;
            if (second) {
              toast.message = `倒计时 ${second} 秒`;
            } else {
              clearInterval(timer);
              // 手动清除 Toast
              //this.$toast.clear();
              this.$toast.success('删除成功！');
            }
          }, 1000);
          //全局注册
          //this.$toast.success('删除成功！');
        }
      }).catch(err => {
        console.log(err);
      })
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {
    console.log();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style lang="less" scoped>
.his-hot {
  background-color: #fff;
  padding: 8px;
  margin-bottom: 20px;
  .hd {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    margin-bottom: 5px;
    h4 {
      font-size: 20px;
    }
  }
  .bd {
    .van-tag {
      padding: 3px;
      margin: 3px;
    }
  }
  .red {
    color: red;
  }
}
</style>